.vin-skeleton {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  .content {
    display: flex;

    .content-line {
      display: flex;
      flex-direction: column;
      .title {
        width: 30%;
        height: 15px;
        background: #efefef;
      }
    }
  }

  &__block {
    &,
    &--round {
      width: 100%;
      height: 100%;
      margin-top: 10px;
      background: rgb(239, 239, 239);

      &:last-child {
        width: 70% !important;
      }
    }

    &--round {
      border-radius: 10px;
    }
  }

  &__avatar {
    margin-right: 20px;
    background: rgb(239, 239, 239);
  }

  &-animation {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      hsla(0, 0%, 100%, 0),
      hsla(0, 0%, 100%, 0.5) 50%,
      hsla(0, 0%, 100%, 0) 80%
    );
    background-repeat: no-repeat;
    animation: backpos 2s ease-in-out 0s infinite;
  }

  @keyframes backpos {
    0% {
      background-position-x: -500px;
    }
    to {
      background-position-x: calc(500px + 100%);
    }
  }
}
